<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <div class="flex flex_between">
          <p class="flex flex_vcenter pdb20">
            <i class="titleTag"></i>
            <span class="fRedBig">随访信息管理</span>
          </p>
          <button class="longBtn" @click="addVisit()">新增随访</button>
        </div>

        <div class="whiteBg">
          <ul class="flex wrap illInfoBox">
            <li>
              <label>姓 名：</label>
              <span>{{mainInfo.patient.BRXM}}</span>
            </li>
            <li>
              <label>性 别：</label>
              <span>{{mainInfo.patient.BRXB | sex}}</span>
            </li>
            <li>
              <label>年 龄：</label>
              <span>{{mainInfo.patient.CSNY | old}}</span>
            </li>
            <li>
              <label>联系电话：</label>
              <span>{{mainInfo.patient.LXDH}}</span>
            </li>
            <li>
              <label>证件类型：</label>
              <span></span>
            </li>
            <li>
              <label>证件号码：</label>
              <span></span>
            </li>
          </ul>
          <div class="mt20"></div>
          <div class="pd20">
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <th>日期</th>
                <th>名称</th>
                <th>方式</th>
                <th>问卷</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in tableData">
                <td>{{item.SFSJ | timeStr}}</td>
                <td>{{item.SFMC}}</td>
                <td>{{item.SFZL | SFZL}}</td>
                <td>{{item.YSMC}}</td>
                <td>{{item.JHZT | jhzt}}</td>
                <td>
                  <span title="调整" v-show="item.JHZT == 0" @click="editPlan(item)">
                    <img src="../../assets/img/jsszy/编辑1.png" alt="" class="xicon">
                  </span>
                  <span title="删除" v-show="item.JHZT == 0" @click="cancelPlan(item)" class="pl10">
                    <img src="../../assets/img/jsszy/移除.png" alt="" class="xicon">
                  </span>
                  <span title="查询" v-show="item.JHZT != 0" class="pl10" @click="toOnce(item)">
                    <img src="../../assets/img/jsszy/查询1.png" alt="" class="xicon">
                  </span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="editRuleModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">随访明细计划编辑</h4>
          </div>
          <div class="modal-body">
            <ul class="formList">
              <li>
                <label>随访名称</label>
                <input type="text" class="form-control" v-model="editParam.SFMC">
              </li>
              <li>
                <label>随访日期</label>
                <input type="text" placeholder="请选择开始日期" class="form-control" id="editstartdate" v-model="editParam.SFSJ" />
              </li>
              <li>
                <label>随访方式</label>
                <select class="form-control" v-model="editParam.SFFS">
                  <option value="1">电话随访</option>
                  <option value="2">当面随访</option>
                  <option value="3">视频随访</option>
                </select>
              </li>
              <li>
                <label>随访问卷</label>
                <select class="form-control" v-model="editPaper">
                  <option v-for="item in paperList" :value="item">{{item.YSMC}}</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button class="longBtn center-block" @click="saveEdit()">保 存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="newRuleModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">新增随访明细计划</h4>
          </div>
          <div class="modal-body">
            <ul class="formList">
              <li>
                <label>随访名称</label>
                <input type="text" class="form-control" v-model="addParam.SFMC">
              </li>
              <li>
                <label>随访日期</label>
                <input type="text" placeholder="请选择开始日期" class="form-control" v-model="addParam.SFSJ" id="addstartdate"/>
              </li>
              <li>
                <label>随访方式</label>
                <select class="form-control" v-model="addParam.SFFS">
                  <option value="1">电话随访</option>
                  <option value="2">当面随访</option>
                  <option value="3">视频随访</option>
                </select>
              </li>
              <li>
                <label>随访问卷</label>
                <select class="form-control" v-model="addPaper">
                  <option v-for="item in paperList" :value="item">{{item.YSMC}}</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button class="longBtn center-block" @click="saveAdd()">保 存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="confirmCancel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">确认终止此条随访计划吗？</h4>
          </div>
          <div class="modal-body">
            <div class="flex">
              <label style="width:140px">终止原因：</label>
              <input type="text" class="form-control" v-model="reason">
            </div>
          </div>
          <div class="modal-footer flex flex_end">
            <button class="btn btn-default" @click="confirmRuleEnd()">确认</button>
            <button class="btn btn-danger" data-dismiss="modal">取消</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
  export default {
    data () {
      return {
        tableData: [],
        addSfTitle: '',
        sfType: [
          {text:'慢病随访',value:1},
          {text:'出院普通随访',value:2},
          {text:'门诊普通随访',value:3}
        ],
        addSfType: '',
        startDate: '',
        paperList: [],
        mainInfo: {
          patient: {}
        },
        editParam: {},
        editPaper: {},
        addParam: {
          SFMC: '',
          SFSJ: '',
          SFFS: ''
        },
        addPaper: {},
        cancelParam: {},
        reason: ''
      }
    },
    components: {
      moduleHead, menuList
    },
    filters: {
      'sffs' (val) {
        if (val == 1) {
          return '电话随访'
        } else if (val == 2) {
          return '当面随访'
        } else if (val == 3) {
          return '视频随访'
        }
      },
      'SFZL' (val) {
        if (val == 1) {
          return '慢病随访'
        } else if (val == 2) {
          return '出院普通随访'
        }else if (val == 3) {
          return '门诊普通随访'
        }
      },
      'sex' (val) {
        if (val == 1) {
          return '男'
        } else if (val == 2) {
          return '女'
        } else {
          return '不详'
        }
      },
      'old' (val) {
        if (val) {
          var year = val.slice(0,4)
          return new Date().getFullYear()-year
        }
      },
      'jhzt' (val) {
        if (val == 0) {
          return '待随访'
        } else {
          return '已随访'
        }
      },
      'timeStr' (val) {
        var time = new Date(val)
        var result = this.formatDate(time)
        return result
      }
    },
    ready () {
      var self = this
      var mainInfo = window.location.href.split('?')[1]
      this.mainInfo = JSON.parse(decodeURIComponent(mainInfo.split('=')[1]))
      console.log(JSON.stringify(this.mainInfo))
      laydate({
        elem: '#addstartdate',
        max: laydate.now(),
        choose: function(datas) { //选择日期完毕的回调
          self.addParam.SFSJ = datas
        }
      })
      laydate({
        elem: '#editstartdate',
        max: laydate.now(),
        choose: function(datas) { //选择日期完毕的回调
          self.editParam.SFSJ = datas
        }
      })
      this.queryPaperList()
      this.queryVisitManage()
    },
    methods: {
      queryPaperList () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/styleList",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            jgid: '1'
          },
          success:function(res){
            if (res.Data) {
              self.paperList = res.Data
            }
          }
        })
      },
      queryVisitManage () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/planlist",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            SFZL: self.mainInfo.sfzl,
            SFKS: self.mainInfo.sfks,
            BRLX: self.mainInfo.brlx,
            ZYH: self.mainInfo.zyh
          },
          success:function(res){
            if (res.Data) {
              self.tableData = res.Data
            }
          }
        })
      },
      formatDate (now) {
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        if (month<10) {
          month = '0'+month
        }
        var date=now.getDate()
        if (date<10) {
          date = '0'+date
        }
        return year+"-"+month+"-"+date;
      },
      editPlan (item) {
        $('#editRuleModal').modal('show')
        this.editParam = item
        this.editParam.SFSJ = this.formatDate(new Date(this.editParam.SFSJ))
        for (var i = 0; i < this.paperList.length; i++) {
          if (item.YSXH == this.paperList[i].YSXH && item.BBH == this.paperList[i].BBH) {
            this.editPaper = this.paperList[i]
          }
        }
      },
      saveEdit () {
        var self = this
        this.editParam.YSXH = this.editPaper.YSXH
        this.editParam.BBH = this.editPaper.BBH
        this.editParam.YSMC = this.editPaper.YSMC
        var postdata= this.editParam
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/edit/plan",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(postdata),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt('保存成功')
              $('#editRuleModal').modal('hide')
              self.queryVisitManage()
            }
          }
        })
      },
      addVisit () {
        $('#newRuleModal').modal('show')
      },
      saveAdd () {
        var self = this
        var postdata= {
          JHID: '',
          BRLX: this.mainInfo.brlx,
          ZYH: this.mainInfo.zyh,
          YSXH: this.addPaper.YSXH,
          BBH: this.addPaper.BBH,
          YSMC: this.addPaper.YSMC,
          SFZL: this.mainInfo.sfzl,
          SFMC: this.addParam.SFMC,
          SFKS: this.mainInfo.sfks,
          KSMC: '',
          SFFS: this.addParam.SFFS,
          SFSJ: new Date(this.addParam.SFSJ),
          JHZT: '',
          BZXX: '',
          ZZYY: ''
        }
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/add/plan",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(postdata),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt('新增成功')
              $('#newRuleModal').modal('hide')
              self.queryVisitManage()
            }
          }
        })
      },
      cancelPlan (item) {
        this.cancelParam = item
        $('#confirmCancel').modal('show')
      },
      confirmRuleEnd () {
        var self = this
        if (this.reason.length == 0) {
          Public.ajaxPrompt('请输入终止计划原因')
          return
        }
        this.cancelParam.ZZYY = this.reason
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/delete/plan",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(self.cancelParam),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt('取消随访成功')
              $('#confirmCancel').modal('hide')
              self.queryVisitManage()
            }
          }
        })
      },
      toOnce (urlParam) {
        urlParam.BRXM = this.mainInfo.patient.BRXM
        urlParam.BRXB = this.mainInfo.patient.BRXB
        urlParam.CSNY = this.mainInfo.patient.CSNY
        window.location.href="visitOnceQuery.html?param="+encodeURIComponent(JSON.stringify(urlParam))
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .illInfoBox>li{
    margin-right:20px;
  }
  .illInfoBox{
    border-bottom:2px solid #FBECEB;
    background-color: #FFFBF8;
    box-shadow: 0 3px 3px #FFFBF8;
    padding:20px;
    border-radius: 10px 10px 0 0;
  }
  .whiteBg{
    padding:0!important;
    border:2px solid #FBECEB;
  }
  .formList>li{
    display:flex;
    -webkit-display:flex;
    padding:10px;
  }
  .formList>li>label{
    width:80px;
  }
</style>
